<template>
    <div class="topic_cont flex_column_between" ref="boxfull"  v-loading="loading">
        <h5 class="title">选择词书</h5>
        <template v-if="courseData.length > 0">
            <div class="work_cont">
                <div 
                    class="item transition flex_center_center" 
                    v-for="(item, index) in courseData" 
                    :key="index" 
                    :class="{active: chooseCourse == item.id}" 
                    @click="chooseCourseFun(item)"
                >
                    <el-tooltip effect="dark" placement="top" v-if="item.overflow">
                        <template #content>
                            <p class="tooltip_overflow">{{ item.name }}</p>
                        </template>
                        <p>{{ item.name }}</p>
                    </el-tooltip>
                    <p v-overflow="overflow => courseData.splice(index, 1, { ...courseData[index], overflow })" v-else>{{ item.name }}</p>
                </div>
                <div class="item1"></div>
                <div class="item1"></div>
                <div class="item1"></div>
            </div>
            <el-button
                :loading="confirmLoading"
                id="fullscreen_button"
                style="width: 208px; margin: 2.4rem 0"
                type="primary"
                @click="confirmChoose"
            >
                确认选择
            </el-button>
        </template>
        <empty type="1" text="暂无词书" v-else />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { courseList } from '@/api/course.js'
import { join } from '@/api/articleExercise.js'
import { appointmentInfo } from '@/api/appointment.js'
export default {
    data() {
        return {
            loading: false,
            confirmLoading: false,
            courseData: [''],
            appointmentId: 0,
            userId: 0,
            isLearn: 0, //0: 教练教学练习  1：学生上课
            categoryId: 1,
            chooseCourse: 0, //选择的课程
            appointment: {},
            detectoverflow: false
        }
    },
    computed: {
        ...mapState({ userInfo: state => state.user.userInfo })
    },
    mounted() {
        this.appointmentId = this.$route.query.appointmentId || ''
        this.userId = this.$route.query.userId || 0
        this.isLearn = this.userId ? 1 : 0
        this.categoryId = this.$route.query.categoryId || 1
        this.getCourseList()
    },
    methods: {
        getCourseList() {
            this.loading = true
            let param = {}
            if (this.isLearn == 0) {
                param.isTrial = 1
            } else {
                param.userId = this.userId
            }
            param.categoryId = this.categoryId
            courseList(param).then(res => {
                this.courseData = res.data
                this.loading = false
            })
        },
        chooseCourseFun(row) {
            this.chooseCourse = row.id
        },
        //确认选择
        confirmChoose() {
            if (!this.chooseCourse) {
                this.$message.error('请选择词书')
                return
            }
            let param = {
                courseId: this.chooseCourse,
                appointmentId: this.appointmentId,
                userId: this.userId
            }

            this.confirmLoading = true
            if (this.userId) {
                this.$router.push(`/aireading/vocabulary?courseId=${this.chooseCourse}&userId=${this.userId}&appointmentId=${this.appointmentId}`)
            } else {
                this.$router.push(`/aireading/vocabulary?courseId=${this.chooseCourse}&appointmentId=${this.appointmentId}`)
            }
            // join(param).then(res => {
            //     this.confirmLoading = false
            //     if (res.error == 0) {
            //         let exerciseId = res.data.id
            //         if (this.userId) {
            //             this.$router.push(`/aireading/vocabulary?courseId=${this.chooseCourse}&exerciseId=${exerciseId}&userId=${this.userId}`)
            //         } else {
            //             this.$router.push(`/aireading/vocabulary?courseId=${this.chooseCourse}&exerciseId=${exerciseId}`)
            //         }
            //     }
            // }).finally(() => {
            //     this.confirmLoading = false
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.tooltip_overflow{max-width: 200px}

.topic_cont{
    width: 100%;
    height: 100%;
    padding: 0 2.4rem;
}
.title{
    padding: 2rem 0;
    font-size: 3.2rem;
    color: #1A1A1A;
    font-weight: normal;
}
.work_cont{
    width: 100%;
    height:0;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: start;
    padding-top: 1rem;
    // flex-direction: row;
    overflow-y: scroll;
    overflow: auto;
    align-self:baseline;
    box-sizing: border-box;
    // margin-top: 20px;
    padding:0 20px;
    border-bottom: 2px solid #F7F8FA;

    .item{
        width: 22%;
        min-height: 13.8rem;
        text-align: center;
        line-height: 4.8rem;
        padding: 0 4.5rem;
        background: #F7F8FA;
        border-radius: 10px;
        font-size: 2.4rem;
        margin-bottom: 2.4rem;
        cursor: pointer;

        p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
        &:hover{background: #F69B2C;color: #fff}
    }
    .item1{
        width: 22%;
        height: 13.8rem;
    }
    .active{
        background: #F69B2C;
        color: #fff;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }

}

</style>
